import { formatDate } from "@/utils/util";
import "./index.less";
import { CheckCircleOutlined, RedoOutlined, UserOutlined } from "@ant-design/icons";
import { Avatar, Timeline } from "antd";
import { useTranslation } from "react-i18next";
import { useEffect } from "react";
const { Item } = Timeline;
const index = ({ record, taskListByProcess }: any) => {
	const { t } = useTranslation();
	const en_vi = "task.todo";
	useEffect(() => {
		console.log(taskListByProcess);
	}, [record]);
	const approvalNode = () => {
		console.log("taskListByProcess===>", taskListByProcess);

		if (taskListByProcess) {
			return taskListByProcess.map((item: any) => (
				<Item dot={item.status === 2 ? <CheckCircleOutlined /> : <RedoOutlined />} key={item.id}>
					<div className="flex promoter">
						<p>{item && item.name}</p>
						<p className="createTim">
							{item.processInstance && item.processInstance.endTime
								? formatDate(new Date(item.processInstance.endTime))
								: formatDate(new Date(item.createTime))}
						</p>
					</div>
					<div className=" flex">
						<div className="profilePicture flex">
							{item.assigneeUser.avatar ? <img src={item.assigneeUser.avatar} alt="" /> : <Avatar icon={<UserOutlined />} />}
							{item.assigneeUser && <p className="margin_0">{item.assigneeUser.nickname}</p>}
						</div>
					</div>
					<p className="opinion">
						{t("HRMS.leaveApproval.approvalOpinion")}:{item.reason}
					</p>
				</Item>
			));
		}
		if (record.processInstance && record.processInstance.status !== 4) {
			return (
				<Item dot={record.processInstance && record.processInstance.endTime ? <CheckCircleOutlined /> : <RedoOutlined />}>
					<div className="flex promoter">
						<p>{record && record.name}</p>
						<p className="createTim">
							{record.processInstance && record.processInstance.endTime
								? formatDate(new Date(record.processInstance.endTime))
								: formatDate(new Date(record.createTime))}
						</p>
					</div>
					<div className="tasks flex">
						{record.tasks &&
							record.tasks.map((item: any) => {
								if (item.status === 1) {
									return (
										<div className="tasksItem" key={item.id}>
											<div className=" flex">
												<div className="profilePicture flex">
													{item.assigneeUser.avatar ? (
														<img src={item.assigneeUser.avatar} alt="" />
													) : (
														<Avatar icon={<UserOutlined />} />
													)}
													<p className="margin_0">{item.assigneeUser.nickname}</p>
												</div>
											</div>
										</div>
									);
								}
								if (item.status === 2 || item.status === 3) {
									return (
										<div className="tasksItem" key={item.id}>
											<div className=" flex">
												<div className="profilePicture flex">
													{item.assigneeUser.avatar ? (
														<img src={item.assigneeUser.avatar} alt="" />
													) : (
														<Avatar icon={<UserOutlined />} />
													)}
													<p className="margin_0">{item.assigneeUser.nickname}</p>
												</div>
											</div>
											<p className="opinion">
												{t("HRMS.leaveApproval.approvalOpinion")}:{item.reason}
											</p>
										</div>
									);
								}
							})}
					</div>
				</Item>
			);
		}
	};
	return (
		<div className="approvalDetails">
			<Timeline>
				<Item dot={<CheckCircleOutlined />}>
					<div className="flex promoter">
						<p>{t(`${en_vi}.promoter`)}</p>
						<p className="createTim">{formatDate(new Date(record.createTime))}</p>
					</div>
					<div className=" flex">
						<div className="profilePicture flex">
							<Avatar icon={<UserOutlined />}></Avatar>
							{record.processInstance && <p className="margin_0">{record.processInstance.startUser.nickname}</p>}
						</div>
					</div>
				</Item>
				{approvalNode()}
				{record.processInstance &&
					(record.processInstance.status === 2 || record.processInstance.status === 4 ? (
						<Item dot={<CheckCircleOutlined />}>
							<div className="flex promoter">
								<p className="margin_0">{t(`${en_vi}.end`)}</p>
								<p className="margin_0 createTim">{formatDate(new Date(record.processInstance.endTime))}</p>
							</div>
							{/* <p className="opinion">{"用户主动取消流程"}</p> */}
						</Item>
					) : (
						""
					))}
			</Timeline>
		</div>
	);
};
export default index;
